<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左边右边定宽中间自适应三列布局</title>
    <style type="text/css">
        html,body{
            height: 100%;
        }

        .box{
            display: table;
            width: 100%;
            height: 300px;
        }

        .left{
            width: 150px;
            background: #ccc;
            display: table-cell;
        }

        .right{
            border: 1px solid #c20;
            width: 120px;
            display: table-cell;
        }

        .middle{
            display: table-cell;
            background: #aec;
        }

    </style>
</head>
<body>

    <!-- 这里会有个问题  就是 middle 的div 不会变成宽度为 0px 的选项 而是有个固定的宽度-->
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>
</html>


<!--
    参考文档: https://segmentfault.com/a/1190000007007885
    使用table-cell还可以实现很多的布局，需要自己去发挥想象。总结下来也就需要记住几点，设置了display:table-cell的元素具有以下特性。
text-align、vertical-align等对齐属性起作用，margin不起作用。宽高百分比值不起作用。
会生成虚拟的table、tr把自己包裹住，如果有相邻的兄弟元素也被设置了table-cell,则会跟兄弟元素一起生成虚拟的table、tr把自己包裹住，并一行等高显示
多个table-cell元素会占满被设置了display: table的元素的宽度，如果一个元素被设置了宽度，那么其他剩余的table-cell元素会占满剩下的宽度。
当然，如果只有一个table-cell元素，就算设置了宽度也会占满table元素的宽度。
对设置了float、absolute的元素不起作用。且IE6、7不支持
  -->

<!--
display: inline-block
inline-block元素把自己变成特殊的inline元素，对于相邻的元素来说表现出inline的特点，允许空格。
对于内部元素来说表现出block元素的特点，可以设置高度和宽度。
空格是两个标签中存在换行符or制表符or空格符（其实就是缩进）的原因生产的，
只需要给设置了inline-block属性的父元素设置font-size:0,就可以使标签中的空格失去宽度
-->